<!--
 * Created by sf
 * 2019/12/5
 -->

<!--功能使用时间段-->

<template>
  <!--<el-button type="primary" plain @click="changeType">切换图表类型</el-button>-->
  <component
    :judge-width="true"
    :data="chartData"
    :is="`ve-${this.typeArr[this.index]}`"
    :settings="chartSettings"
    :grid="grid"
    :legend-visible="false"
    :extend="chartExtend" />
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
import VeHistogram from 'v-charts/lib/histogram.common'
import VePie from 'v-charts/lib/pie.common'

export default {
  components: { VeLine, VeHistogram, VePie },
  data () {
    return {
      index: 1,
      typeArr: ['line', 'histogram', 'pie'],
      grid: {
        show: false,
        backgroundColor: '#ccc'
      },
      xAxis: {
        axisLabel: {
          textStyle: {
            color: 'white'
          }
        }
      },
      chartExtend: {
        series: {
          // color: '#65d186',
          barWidth: 30,
          label: { show: true, position: 'top', color: 'rgba(255,255,255, .6)' }
        },
        xAxis: {
          show: true,
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255, .6)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255, .6)'
            }
          }
        },
        yAxis: {
          splitLine: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255, .6)'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255, .6)'
            }
          }
        }
      },
      chartSettings: {
        labelMap: {
          PV: '功能使用次数'
        },
        legend: {
          PV: 'TEST'
        },
        yAxisType: 'percent',
        yAxisName: ['功能使用次数', 'PV'],
        opacity: 1
      },
      chartData: {
        columns: ['date', 'PV'],
        // columns: ['时间段', '功能使用次数'],
        rows: [
          { 'date': '00', 'PV': 1231 },
          { 'date': '01', 'PV': 1231 },
          { 'date': '02', 'PV': 1223 },
          { 'date': '03', 'PV': 2123 },
          { 'date': '04', 'PV': 4123 },
          { 'date': '05', 'PV': 3123 },
          { 'date': '06', 'PV': 7123 },
          { 'date': '07', 'PV': 1231 },
          { 'date': '08', 'PV': 1223 },
          { 'date': '09', 'PV': 2123 },
          { 'date': '10', 'PV': 4123 },
          { 'date': '11', 'PV': 3123 },
          { 'date': '12', 'PV': 7123 },
          { 'date': '13', 'PV': 1231 },
          { 'date': '14', 'PV': 1223 },
          { 'date': '15', 'PV': 2123 },
          { 'date': '16', 'PV': 4123 },
          { 'date': '17', 'PV': 3123 },
          { 'date': '18', 'PV': 7123 },
          { 'date': '19', 'PV': 1231 },
          { 'date': '20', 'PV': 1223 },
          { 'date': '21', 'PV': 2123 },
          { 'date': '22', 'PV': 4123 },
          { 'date': '23', 'PV': 3123 }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    changeType: function () {
      this.index++
      if (this.index >= this.typeArr.length) { this.index = 0 }
    }
  }
}
</script>
